<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第七个 ECharts 实例  折线图拖拽 </title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.1.1/echarts.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <dvi class="container">
        <div class="container">
            <label>Apache ECharts 7 - 折线图拖拽图 </label>
        </div>

        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="echartsDemo" class="breadcrumb" style="width: 600px;height:400px;"></div>
    </dvi>
   
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echartsDemo'));

        
        var symbolSize = 20;
        var data = [[40, -10], [-30, -5], [-76.5, 20], [-63.5, 40], [-22.1, 50]];


        var option = {
            title: {
                text: 'Try Dragging these Points',
                left: 'center'
            },
            tooltip: {
                triggerOn: 'none',
                formatter: function (params) {
                    return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
                }
            },
            grid: {
                top: '8%',
                bottom: '12%',
            },
            xAxis: {
                min: -100,
                max: 70,
                type: 'value',
                axisLine: {onZero: false}
            },
            yAxis: {
                min: -30,
                max: 60,
                type: 'value',
                axisLine: {onZero: false}
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                }
            ],
            series: [
                {
                    id: 'a',
                    type: 'line',
                    smooth: true,
                    symbolSize: symbolSize,
                    data: data
                }
            ]
        };



        setTimeout(function () {
    // Add shadow circles (which is not visible) to enable drag.
            myChart.setOption({
                graphic: data.map(function (item, dataIndex) {
                    return {
                        type: 'circle',
                        position: myChart.convertToPixel('grid', item),
                        shape: {
                            cx: 0,
                            cy: 0,
                            r: symbolSize / 2
                        },
                        invisible: true,
                        draggable: true,
                        ondrag: function (dx, dy) {
                            onPointDragging(dataIndex, [this.x, this.y]);
                        },
                        onmousemove: function () {
                            showTooltip(dataIndex);
                        },
                        onmouseout: function () {
                            hideTooltip(dataIndex);
                        },
                        z: 100
                    };
                })
            });
        }, 0);




        window.addEventListener('resize', updatePosition);

        myChart.on('dataZoom', updatePosition);

        function updatePosition() {
            myChart.setOption({
                graphic: data.map(function (item, dataIndex) {
                    return {
                        position: myChart.convertToPixel('grid', item)
                    };
                })
            });
        }

        function showTooltip(dataIndex) {
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: dataIndex
            });
        }

        function hideTooltip(dataIndex) {
            myChart.dispatchAction({
                type: 'hideTip'
            });
        }

        function onPointDragging(dataIndex, pos) {
            data[dataIndex] = myChart.convertFromPixel('grid', pos);

            // Update data
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }






    </script>
</body>
</html>